<template>
  <div>
    <el-container>
      <el-aside class="me-area" style="background: transparent">
        <ul class="me-data-list">
          <li class="me-data-item">
            <el-badge :value="dataCount.productCounts">
              <el-button @click="changeBasicData(0)" size="small"
                >标案产品
              </el-button>
            </el-badge>
          </li>
          <li class="me-data-item">
            <el-badge :value="dataCount.typeCounts">
              <el-button @click="changeBasicData(1)" size="small"
                >标案类型
              </el-button>
            </el-badge>
          </li>
          <li class="me-data-item">
            <el-badge :value="dataCount.projCounts">
              <el-button @click="changeBasicData(2)" size="small"
                >标案项目
              </el-button>
            </el-badge>
          </li>
        </ul>
      </el-aside>

      <el-main>
        <div>
          <div class="me-data-title">
            <h1>{{ currentTitle }}</h1>
          </div>
          <div style="margin-left: 20px">
            <el-form inline @submit.native.prevent="search">
              <el-form-item label="搜索" style="margin-right: 20px">
                <el-input
                  v-model="searchForm.queryConditions"
                  clearable
                  placeholder="请输入查询条件"
                  prefix-icon="el-icon-search"
                  style="width: 350px"
                  size="medium"
                />
              </el-form-item>
              <el-form-item
                label="产品类型"
                v-if="type !== 1"
                style="margin-right: 20px"
              >
                <el-select
                  v-model="searchForm.typeId"
                  clearable
                  placeholder="全部"
                  style="width: 150px"
                  @change="productTypeSelected"
                >
                  <el-option
                    v-for="item in productTypeList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.productType"
                  />
                </el-select>
              </el-form-item>
              <!-- <el-form-item label="组织" style="margin-right: 20px">
                <el-select
                  v-model="searchForm.organizeId"
                  clearable
                  placeholder="全部"
                  style="width: 200px"
                  @change="organizeSelected"
                >
                  <el-option
                    v-for="item in organization"
                    :key="item.id"
                    :value="item.id"
                    :label="item.organizeName"
                  />
                </el-select>
              </el-form-item> -->
              <el-form-item>
                <el-button native-type="submit" size="medium" type="primary">
                  搜索
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="data_container">
            <card-basic-data
              v-for="data in dataInfos"
              :key="data.id"
              :dataInfo="data"
              :type="type"
            />
            <el-pagination
              :current-page="paging.current"
              :page-sizes="paging.pageSizes"
              :page-size="paging.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="paging.total"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import CardBasicData from "./card/CardBasicData.vue";
import { getDataCount } from "@/api/home";
import { getProductTypeBriefInfos } from "@/api/productType";
import { getAllProductInfosByPageAndConditions } from "@/api/product";
import { getProductTypeInfosByPageAndConditions } from "@/api/productType";
import { getAllProjectInfosByConditions } from "@/api/project";

export default {
  name: "BasicData",
  components: {
    CardBasicData,
  },
  created() {
    this.getCounts();
    let paramType = parseInt(this.$route.params.type);
    if (paramType === 0 || paramType === 1 || paramType === 2) {
      console.log("paramType2:", paramType);
      this.changeBasicData(paramType);
    } else {
      this.changeBasicData(0);
    }
  },
  data() {
    return {
      dataCount: {
        productCounts: 0,
        typeCounts: 0,
        projCounts: 0,
      },
      type: 0,
      currentTitle: "",
      searchForm: {
        queryConditions: "",
        typeId: "",
      },
      paging: {
        total: 0,
        current: 1,
        pageSizes: [4, 8, 12],
        size: 4,
      },
      dataInfos: [],
      productTypeList: [],
    };
  },

  methods: {
    getCounts() {
      getDataCount().then((res) => {
        this.dataCount = res.data;
      });
    },
    changeBasicData(type) {
      const form = {
        ...this.searchForm,
        page: this.paging.current,
        pageSize: this.paging.size,
      };
      if (type === 0) {
        this.type = 0;
        this.currentTitle = "标案产品";
        // 获取select数据
        this.getProductType();
        getAllProductInfosByPageAndConditions(form)
          .then(({ data }) => {
            console.log(data);
            this.dataInfos = data.productInfos;
            this.paging.total = data.totalCount;
          })
          .catch((err) => {
            // 如果没有数据就显示为空
            this.dataInfos = [];
            // 返还每页显示的条数
            this.paging.total = 0;
          });
      } else if (type === 1) {
        this.type = 1;
        this.currentTitle = "标案类型";
        getProductTypeInfosByPageAndConditions(form)
          .then(({ data }) => {
            this.dataInfos = data.productTypeInfos;
            //this.paging.size = data.size
            this.paging.total = data.totalCount;
          })
          .catch((err) => {
            // 如果没有数据就显示为空
            this.dataInfos = [];
            // 返还每页显示的条数
            this.paging.total = 0;
          });
      } else {
        this.type = 2;
        this.currentTitle = "标案项目";
        // 获取select数据
        this.getProductType();
        getAllProjectInfosByConditions(form)
          .then(({ data }) => {
            console.log(data);
            this.dataInfos = data.projectInfos;
            this.paging.total = data.totalCount;
          })
          .catch((err) => {
            // 如果没有数据就显示为空
            this.dataInfos = [];
            // 返还每页显示的条数
            this.paging.total = 0;
          });
      }
    },
    async getProductType() {
      const result = await getProductTypeBriefInfos();
      this.productTypeList = result.data;
    },
    search() {
      this.paging.current = 1;
      this.changeBasicData(this.type);
    },
    productTypeSelected(val) {
      this.searchForm.typeId = val;
      this.search();
    },
    handleSizeChange(val) {
      this.paging.current = 1;
      this.paging.size = val;
      this.changeBasicData(this.type);
    },
    handleCurrentChange(val) {
      this.paging.current = val;
      this.changeBasicData(this.type);
    },
  },
};
</script>

<style scoped>
.el-container {
  width: 1200px;
  text-align: center;
}

.el-aside {
  position: fixed;
  left: 100px;
  width: 150px !important;
}

.el-main {
  padding: 0px;
  line-height: 16px;
  margin-left: 20%;
}

.me-data-list {
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
  list-style-type: none;
  background: transparent;
}

.me-data-item {
  margin-top: 18px;
  padding: 4px;
  font-size: 18px;
  color: #5fb878;
}

.me-order-list {
  float: right;
}

.me-data-title {
  margin-left: 4px;
  margin-bottom: 12px;
}

.el-pagination {
  position: relative;
  margin-top: 20px;
}

.data_container {
  justify-content: center;
  align-items: center;
}
.data_container .data {
  margin: 20px 40px;
  text-align: left;
}
</style>
